import React from 'react'
import { Table } from 'antd';
import './index.less'
import Cookie from "@/utils/cookie";
import WaterCanvas from "../waterCanvas";
export class CTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          userId: Cookie.get('userName'),
          watermarkUrl:""
        }
    }
    componentDidMount() {
        // if(this.props.onLoaded)this.props.onLoaded(true)
    }
  componentDidUpdate(){
  }
   handleWatermarkReady = (url) => {
    this.setState({
      watermarkUrl:url
    })
  };
  render() {
        const tabledata=this.props.table||[];
        const columnsNames=this.props.columns||[];
        // 检查 tabledata 是否是二维数组
        const isTableDataValid = Array.isArray(tabledata) && tabledata.every(Array.isArray);
        // 检查 columnsNames 是否是字符串数组
        const isColumnsNamesValid = Array.isArray(columnsNames) && columnsNames.every(name => typeof name === 'string');
        if (!isTableDataValid || !isColumnsNamesValid) {
            return <div>表格数据异常！</div>
        }
        // 转换数据
         const transformedData = tabledata.map((item, index) => {
             const obj = {};
             item.forEach((value, i) => {
                 obj['index' + i] = value;
                 obj.key = index;  // 添加 key 属性
             });
             return obj;
         });
         // 创建列
         const columns = columnsNames.map((name, index) => ({
             title: name,
             dataIndex: 'index' + index,
             key: 'index' + index,
             align:'center',
         }));
        return <div className='table-main' id="contentWrap">
          <WaterCanvas userId={this.state.userId} onWatermarkReady={this.handleWatermarkReady} />
          {this.state.watermarkUrl && <div id="tableWrap" style={{background: "url(" + this.state.watermarkUrl + ") left top repeat",width:document.getElementById("contentWrap").scrollWidth}}></div>}
          <Table rowKey='key' pagination={false} size='small' dataSource={transformedData} columns={columns} />
        </div>

    }
}
